<script>
    ~function($){
        $.fn.extend = function(obj){
            for(var i in obj){
                $.fn[i] = obj[i];
            }
        }
        $.fn.extend({
            dragable : function(options){
                options = options || {
                    //是否保存位置
                    save_position : false

                };

                var _this = this;

                window.__ClassDragable = window.__ClassDragable || (function(){
                    var eventList = [];

                    var classDragable = function(elem,selector){
                        this.open_drag = false;
                        this.element = elem;
                        this.selector = selector;
                        this.jq_element = $(elem);
                        this.init();
                    }

                    classDragable.prototype = {
                        constructor : classDragable,

                        init : function(){
                            this.index = eventList.length;
                            eventList.push(this);

                            var offset = this.jq_element.offset();
                            console.log(offset)
                            this.jq_element.css({
                                position : "fixed",
                                left : offset.left,
                                top : offset.top,
                                margin : 0,
                                right : "auto",
                                bottom : "auto"

                            });
                            console.log(options)

                            if(options.save_position){
                                if(!localStorage[this.selector]){
                                    return;
                                }
                                this.open_drag = true;
                                var data;
                                try{
                                    data = JSON.parse(localStorage[this.selector]);
                                }
                                catch(e){
                                    delete localStorage[this.selector];
                                    return;
                                }
                                var fakerEvent = {
                                    touches : [
                                        {
                                            clientX : data.left,
                                            clientY : data.top
                                        }
                                    ],
                                    target : this.element
                                }
                                this.position = {x : 0, y : 0};
                                console.log(classDragable.__touchMoveEventHandler)
                                classDragable.__touchMoveEventHandler.call(null,fakerEvent);
                                this.open_drag = false;
                            }

                        },

                        dispose : function(){
                            eventList[this.index] = null;
                        }

                    }


                    //为dom绑定touchmove事件
                    document.addEventListener("touchmove",classDragable.__touchMoveEventHandler = function(event){
                        console.log(eventList[0].element == event.target);
                        console.log(event)
                        var touch = event.touches[0];
                        eventList.forEach(function(item){

                            //确定是这个元素
                            if(event.target == item.element && item.open_drag){
                                console.log(touch);
                                item.jq_element.css(item.last_position = {
                                    left : touch.clientX - item.position.x,
                                    top : touch.clientY - item.position.y
                                });
                                console.log(item.position)

                                console.log(item.last_position)
                                if(event.preventDefault){
                                    event.preventDefault();

                                }
                            }

                        });
                    },true);

                    document.addEventListener("touchstart",function(event){
                        console.log("start")
                        var touch = event.touches[0];
                        //触发事件的元素
                        eventList.forEach(function(item){
                            //排除掉无用的元素
                            if(item == null){
                                return;
                            }
                            if(item.element== event.target){
                                item.open_drag = true;
                                //记录偏移修正
                                var offset = item.jq_element.offset();
//                                item.position = {
//                                    x : touch.clientX - offset.left,
//                                    y : touch.clientY - offset.top
//                                };

                                item.position = {x : 0, y : 0}
                            }
                        });
                    });

                    document.addEventListener("touchend",function(event){
                        console.log("end")
                        eventList.forEach(function(item){
                            if(item == null){
                                return;
                            }
                            if(item.element == event.target){
                                item.open_drag = false;
                                if(options.save_position){
                                    localStorage[item.selector] = JSON.stringify(item.last_position);
                                }
                                else if(localStorage[item.selector]){
                                    delete localStorage[item.selector];
                                }
                            }
                        });
                    });

                    return classDragable;

                })();

                this.each(function(index){
                    var tmp = new __ClassDragable(this,_this.selector + index);
                });
            }
        });
    }($);
</script>
<style>
     .ring {
        height: 150px;
        position: relative;
        width: 150px;
    }

    /*.circle{margin:100px auto 0 auto;}*/
    .ring {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0.1) rotate(-270deg);
        -moz-transform: scale(0.1) rotate(-270deg);
        -transform: scale(0.1) rotate(-270deg);
        -webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }

    .open .ring {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0);
        -moz-transform: scale(1) rotate(0);
        -transform: scale(1) rotate(0);
    }

    .center {
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        border: 2px solid #fff;
        bottom: 0;
        color: #fff;
        height: 40px;
        left: 0;
        line-height: 40px;
        margin: auto;
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
        width: 40px;
        -webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }

    .open .center {
        border-color: #aaaaaa;
    }

    .menuItem {
        border-radius: 50%;
        color: #eeeeee;
        display: block;
        height: 40px;
        line-height: 40px;
        margin-left: -20px;
        margin-top: -20px;
        position: absolute;
        text-align: center;
        width: 40px;
        font-size: 1.8em;
    }

    .circle {
        position: fixed;
        right: 3%;
        bottom: 8%;
        z-index: 100;
        font-size: 1.2em;
    }
</style>

<div class="circle">
    <div class="ring">
        <a href="javascript:;" class="menuItem fa fa-home fa-2x"></a>
        <a href="javascript:;" class="menuItem fa fa-user fa-2x"></a>
        <a href="javascript:;" class="menuItem fa fa-star fa-2x"></a>
<!--        <a href="javascript:;" class="menuItem fa fa-shopping-cart"></a>-->
    </div>
    <a href="#" class="center fa fa-th fa-1x"></a>
</div>
<script type="text/javascript">
    var items = document.querySelectorAll('.menuItem');

    for(var i = 0, l = items.length; i < l; i++) {
        items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

        items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
    }

    document.querySelector('.center').onclick = function(e) {
        e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
    }

    $(document).on("click", ".menuItem", function () {
        var _this = $(this);
        if(_this.hasClass("fa-home")){

        }
        else if(_this.hasClass("fa-user")){
            location.href = "/wap/tmpl/member/distribute_center.php";
        }
        else if(_this.hasClass("fa-star")){
            var index = layer.open({type: 2});
            $.post("/shop/index.php?act=seccode&op=proxy_shop_add_goods",{goods_id : <?php echo $_GET['goods_id']?>},function(msg){
                console.log(msg)
                layer.close(index);
                if(msg == "success"){
                    layermsg("添加成功，已加入我的微商城");

                }
                else if(msg == "same"){
                    layermsg("已添加过该商品！");
                }
                else{
                    layermsg("添加失败！");
                }
            })
        }
    });
</script>


